<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:40
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:20:47
 * @FilePath: \i-hos-app\shared\emr\src\components\insert\Menses.vue
 * @Description: 月经史插入组件
-->
<template>
  <div class="menses">
    <Menses @toSureMenses="creatMenses" />
  </div>
  <div ref="refInsertComponent" style="display: none">
    <div class="flexibleMenses" :contenteditable="false" :data-config="JSON.stringify(config)">
      <span>月经史：</span>
      <div class="text">
        <p class="day">{{ config.menses?.day }}</p>
        <p class="mCycleAge">{{ config.menses?.mCycle }}——{{ config.menses?.age }}</p>
        <p class="pCycle">{{ config.menses?.pCycle }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, Ref, reactive, nextTick } from 'vue'
  // 引入公共组件,
  import Menses from '../../components/common/Menses.vue' // 引入日期组件
  // 组件插入hooks
  import { useInsertComponent } from '../../hooks/useInsertComponent'
  // 接口约束
  import { IConfig, IMenseNum } from '../../interface/page'
  // 初始化数据
  let config: IConfig = reactive({
    type: 'menses',
    name: '',
    des: '测试',
    textVal: '',
    code: '',
    menses: {
      day: 0, // 月经持续天数
      mCycle: 0, //  初潮周期
      age: 0, // 绝经年龄
      pCycle: 0, //  生理周期
    },
  })
  const refInsertComponent: Ref<HTMLElement | null> = ref(null)

  const creatMenses = (flag: IMenseNum): void => {
    config.menses = flag
    nextTick(() => {
      // 向电子病历页面插入的组件
      useInsertComponent(refInsertComponent.value as HTMLElement)
    })
  }
</script>

<style scoped lang="scss">
  .menses {
    .menses {
      box-shadow: none;
      padding: 0;
    }
  }
  .flexibleMenses {
    display: inline-flex;
    align-items: center;
    margin-right: 2px;
    position: relative;
    cursor: pointer;
    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background-color: transparent;
      position: absolute;
      top: 0;
      left: 0;
    }
    .text {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1em;
      cursor: pointer;
      p {
        padding: 0;
        margin: 0;
      }
    }
  }
</style>
